<template>
  <div class="nav-menu">
    <div class="img-box">
      <el-image
        style="width: 60px; height: 60px; border-radius: 100%"
        :src="userInfo.avatar"
      ></el-image>
      <div>{{ userInfo.doctor_name }}</div>
    </div>
    <el-menu
      :default-active="defaultValue"
      router
      background-color="#679aff"
      text-color="#fff"
      active-text-color="#679AFF"
      style="font-size: 20px"
      @select="select"
    >
      <template v-for="(item, index) in userMenus" :key="index">
        <el-menu-item :index="item.path + uniacid">
          <!-- <i v-if="item.icon" :class="item.icon"></i> -->
          <img
            v-show="isActive.includes(item.path)"
            style="width: 20px; height: 20px; margin-right: 10px"
            :src="item.icon"
            alt=""
          />
          <img
            v-show="!isActive.includes(item.path)"
            style="width: 20px; height: 20px; margin-right: 10px"
            :src="item.normal"
            alt=""
          />
          <span>{{ item.text }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { userMenus } from '../config'
export default defineComponent({
  name: 'nav-menu',

  setup() {
    const route = useRoute()
    const store = useStore()
    console.log('store', store)

    const userInfo = store.state.user.userInfo
    let isActive = ref(route.path)
    let uniacid = route.params.i
    let defaultValue = ref(route.path)
    const select = (indexpath: string) => {
      isActive.value = indexpath
    }
    return {
      userMenus,
      uniacid,
      defaultValue,
      isActive,
      select,
      userInfo
    }
  }
})
</script>

<style lang="less" scoped>
.nav-menu {
  height: 100%;
  // background-color: #679aff;
  font-size: 20px;
}
.el-menu-item.is-active {
  background-color: #fff !important;
  font-size: 20px;
}
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 144px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
}
</style>
